<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用服务详情 - API文档管理系统</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/api-doc/}">
                    <i class="bi bi-book"></i>
                    API文档管理系统
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/api-doc/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/list}">
                        <i class="bi bi-list"></i>
                        API列表
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/app-service/list}">
                        <i class="bi bi-server"></i>
                        应用服务
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/create}">
                        <i class="bi bi-plus-circle"></i>
                        新增API
                    </a>
                    <a class="nav-link" th:href="@{/swagger-ui/index.html}" target="_blank">
                        <i class="bi bi-code-square"></i>
                        Swagger UI
                    </a>
                </div>
            </div>
        </nav>

        <!-- 错误信息显示 -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-dismiss="alert"></button>
        </div>

        <!-- 应用服务详情 -->
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-server"></i>
                                    应用服务详情
                                </h5>
                            </div>
                            <div class="col-md-6 text-end">
                                <div class="btn-group" role="group">
                                    <a th:href="@{/api-doc/app-service/edit/{id}(id=${appService.id})}" class="btn btn-secondary">
                                        <i class="bi bi-pencil"></i>
                                        编辑
                                    </a>
                                    <button type="button" class="btn btn-danger" onclick="confirmDelete(/*[[${appService.id}]]*/)">
                                        <i class="bi bi-trash"></i>
                                        删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 服务基本信息 -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <h6>
                                    <span th:if="${appService.enabled}" class="badge bg-success">启用</span>
                                    <span th:unless="${appService.enabled}" class="badge bg-secondary">禁用</span>
                                    <span th:text="${appService.name}" class="ms-2">服务名称</span>
                                </h6>
                                <p th:text="${appService.description}">服务描述信息</p>
                            </div>
                        </div>

                        <!-- 详细信息 -->
                        <div class="row">
                            <div class="col-md-6">
                                <p>
                                    <strong>IP地址:</strong>
                                    <span th:text="${appService.ipAddress}" class="ms-2">127.0.0.1</span>
                                </p>
                                <p>
                                    <strong>端口:</strong>
                                    <span th:text="${appService.port}" class="ms-2">8080</span>
                                </p>
                                <p>
                                    <strong>协议:</strong>
                                    <span th:text="${appService.protocol}" class="ms-2">http</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p>
                                    <strong>上下文路径:</strong>
                                    <span th:text="${appService.contextPath}" class="ms-2">/</span>
                                </p>
                                <p>
                                    <strong>基础URL:</strong>
                                    <span th:text="${appService.baseUrl}" class="ms-2">http://127.0.0.1:8080/</span>
                                </p>
                                <p>
                                    <strong>创建时间:</strong>
                                    <span th:text="${#temporals.format(appService.createTime, 'yyyy-MM-dd HH:mm:ss')}" class="ms-2">2023-01-01 12:00:00</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                    <a th:href="@{/api-doc/app-service/list}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i>
                        返回列表
                    </a>
                    <a th:href="@{/api-doc/app-service/edit/{id}(id=${appService.id})}" class="btn btn-primary">
                        <i class="bi bi-pencil"></i>
                        编辑服务
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个应用服务吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
    <script>
        let deleteId = null;
        
        function confirmDelete(id) {
            deleteId = id;
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }
        
        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            if (deleteId) {
                // 发送删除请求
                fetch('/api-doc/app-service/delete/' + deleteId, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        // 跳转到应用服务列表页面
                        window.location.href = '/api-doc/app-service/list';
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
            }
        });
    </script>
</body>
</html>